<script setup lang="ts">
import { ref , onMounted, shallowRef, watch} from 'vue'
import * as monaco from 'monaco-editor'
import { useCounterStore } from '@/stores/counter';

const editor = shallowRef()
const diffEditor = shallowRef()

const monacoRef = ref()
const options = [{
    value: 'vs-dark',
    label: '暗黑'
  },
  {
    value: 'vs-light',
    label: '明亮'
  }
]
// 定义语言选项，供用户切换代码语言
const languageOptions = [
  {
    value: 'java', 
    label: 'JAVA',
  },
  {
    value: 'javascript', 
    label: 'JavaScript',
  },
  {
    value: 'python',
    label: 'Python',
  },
  {
    value: 'css',
    label: 'CSS',
  },
  {
    value: 'html',
    label: 'HTML',
  },
  {
    value: 'typescript',
    label: 'TypeScript',
  },
  {
    value: 'json',
    label: 'JSON',
  },
  {
    value: 'xml',
    label: 'XML',
  },
  {
    value: 'markdown',
    label: 'Markdown',
  },
  {
    value: 'sql',
    label: 'SQL',
  },
];
// 获取store中的数据
const userinfo = useCounterStore();
const themeValue = ref('vs-dark')
type LanguageCode = keyof typeof userinfo.code;
const languageValue = ref<LanguageCode>('javascript');

const originalCode = ref();

const modifiedCode = ref();
const init = () => {
  editor.value = monaco.editor.create(monacoRef.value, {
    value: originalCode.value, // 编辑器初始内容
    language: languageValue.value, // 设置语言为 JavaScript
    theme: themeValue.value, // 应用当前主题
    automaticLayout: true, // 自动调整大小
    lineHeight: 24, // 设置行高
    tabSize: 2, // 设置 Tab 大小
    minimap: {
      enabled: false, // 关闭右侧小地图
    },
    readOnly: false, // 设置为可编辑
    domReadOnly: false, // DOM 只读（更安全）
    fontSize: 14, // 设置字体大小
    wordWrap: 'on', // 自动换行
    folding: true, // 启用代码折叠
    scrollBeyondLastLine: false, // 禁止滚动超出最后一行
    renderLineHighlight: 'all', // 高亮当前行
    overviewRulerBorder: false, // 关闭滚动条边框
    cursorBlinking: 'smooth', // 光标平滑闪烁
    renderWhitespace: 'all', // 显示空格和制表符
  })
}
const isDiffMode = ref(false); // 是否启用对比模式
// 初始化对比编辑器
const initDiffEditor = () => {
  diffEditor.value = monaco.editor.createDiffEditor(monacoRef.value, {
    theme: themeValue.value,
    automaticLayout: true,
    readOnly: false, // 允许在对比编辑器中编辑
    enableSplitViewResizing: true, // 启用分屏调整大小
    renderSideBySide: true, // 启用并排对比视图
    scrollBeyondLastLine: false, // 禁止滚动超出最后一行
  });

  const originalModel = monaco.editor.createModel(originalCode.value, languageValue.value);
  const modifiedModel = monaco.editor.createModel(modifiedCode.value, languageValue.value);

  diffEditor.value.setModel({
    original: originalModel,
    modified: modifiedModel,
  });
};
// 切换模式（常规编辑器和对比编辑器）
const toggleDiffMode = () => {
  isDiffMode.value = !isDiffMode.value;

  // 销毁当前编辑器实例
  if (editor.value) {
    editor.value.dispose();
    editor.value = null;
  }
  if (diffEditor.value) {
    diffEditor.value.dispose();
    diffEditor.value = null;
  }

  // 初始化编辑器
  if (isDiffMode.value) {
    initDiffEditor();
  } else {
    init();
  }
};
// 主题
watch(themeValue, (newTheme) => {
  monaco.editor.setTheme(newTheme);
});
// 语言
watch(languageValue, (newLanguage) => {
  originalCode.value = userinfo.code[languageValue.value]
  modifiedCode.value = userinfo.modifiedCode[languageValue.value]
  console.log(userinfo.code[languageValue.value],'11111111');
  if (isDiffMode.value) {
    // 如果当前是对比编辑器模式
    const diffEditorModels = diffEditor.value.getModel();
    if (diffEditorModels) {
      const { original, modified } = diffEditorModels;
      monaco.editor.setModelLanguage(original, newLanguage);
      monaco.editor.setModelLanguage(modified, newLanguage);
      // 更新内容
      original.setValue(originalCode.value);
      modified.setValue(modifiedCode.value);
    }
  } else if (editor.value) {
    // 普通编辑器
    // monaco.editor.setModelLanguage(editor.value.getModel(), newLanguage);
    const model = monaco.editor.createModel(originalCode.value, newLanguage);
    editor.value.setModel(model);
  }
}, { immediate: true });
onMounted(() => {
  init()
  // originalCode.value = userinfo.code[languageValue.value]
  console.log(userinfo.code[languageValue.value],'11111111');
  
})
</script>

<template>
  <div class="container">
    <div class="select">
      <el-row>
        <el-col>
          <el-button @click="toggleDiffMode">切换编辑器模式</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10" justify="space-between">
        <el-col :span="8">
          <div>语言切换</div>
          <el-select v-model="languageValue" placeholder="语言切换">
          <el-option
            v-for="item in languageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </el-col>
        <el-col :span="8">
          <div>主题切换</div>
          <el-select v-model="themeValue" placeholder="主题切换">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="monaco" id="monaco" ref="monacoRef"></div>
  </div>
</template>
<style lang="scss" scoped>
.container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .select{
    margin: 10px 0;
  }
  .monaco{
    height: 100%;
    width: 100%;
    flex: 1;
}
}
</style>